<template>
	<div class="page">
		<list show-scrollbar="false">
			<refresh @refresh="refresh()" @pullingdown="pullingdown" :display="show" style="height: 60px; align-items: center;justify-content: center;">
				<div style="width: 750px; height: 60px; justify-content: center; align-items: center;">
					<text style="font-size: 24px;">{{ refrshText }}</text>
				</div>
			</refresh>
			<cell>
				<div style="height: 300px; font-size: 50px;border-width: 4px; border-style: solid; border-color: red;margin: 50px; margin-bottom: 0;" @click="toceshi()">
					<text style="font-size: 40px; text-align: center;">{{ chishitext }}</text>
				</div>
			</cell>
			<header><div style="height: 60px;background-color: pink;"></div></header>
			<cell v-for="num in numData" :key="num">
				<div
					@click="itemClick(num)"
					style="height: 300px; font-size: 50px;border-width: 4px; border-style: solid; border-color: red;margin: 50px;margin-bottom:0;align-items: center;justify-content: center;"
				>
					<text style="font-size: 40px;">{{ num }}</text>
				</div>
			</cell>
			<loading @loading="LoadChange()" :display="load">
				<div style="width: 180px; height: 80px; flex-direction: row; align-items: center; justify-content: space-between;margin-left:370px;transform: translateX(-90px);">
					<div>
						<text style="font-size: 24px;">{{ LoadText }}</text>
					</div>
					<loading-indicator />
				</div>
			</loading>
		</list>
	</div>
</template>

<script>
export default {
	data() {
		return {
			chishitext: '测试',
			LoadText: '上拉加载更多',
			load: 'hide',
			show: 'hide',
			refrshText: '下拉开始刷新',
			numData: 10
		};
	},
	
	created() {
		// 监听头部tab栏 点击事件
		uni.onNavigationBarButtonTap(e=>{
			if(e.index===0){
				console.log('点击栏左边')
			}else if(e.index===1){
				console.log('点击了右边')
			}
		})
		// 监听了 搜索栏
		uni.onNavigationBarSearchInputClicked(e=>{
			console.log(111)
		})
		
		// 传过来的数据
		const globalEvent = weex.requireModule('globalEvent');
		globalEvent.addEventListener('plusMessage', res => {
			this.chishitext = res.data.res;
		});
	},
	methods: {
		toceshi() {
			uni.navigateTo({
				url: '../ceshi/ceshi'
			});
		},
		itemClick(num) {
			uni.postMessage({
				data: num,
				status: '1'
			});
		},
		// 上拉加载更多
		LoadChange() {
			this.load = 'show';
			setTimeout(() => {
				this.numData++;
				this.load = 'hide';
			}, 1200);
		},
		// 执行刷新状态
		refresh(e) {
			this.show = 'show';
			this.refrshText = '正在刷新';
			setTimeout(() => {
				this.show = 'hide';
				this.refrshText = '下拉开始刷新';
			}, 1200);
		},
		// 下拉状态
		pullingdown(e) {
			if (e.pullingDistance > e.viewHeight) {
				this.refrshText = '释放开始刷新';
			} else {
				this.refrshText = '下拉开始刷新';
			}
		}
	}
};
</script>

<style>
.page {
	font-size: 20px;
}
</style>
